import React from 'react'
import {List, InputItem, Button, Toast} from 'antd-mobile'
import {createForm} from 'rc-form'
import {Link} from 'umi'
import {useStoreHook} from 'think-react-store'

import './index.less'

function Login(props) {
  const {getFieldProps, validateFields} = props.form
  const {user: {loginAsync}} = useStoreHook()

  const handleSubmit = () => {
    validateFields((err, val) => {
      if (err) {
        Toast.fail('请将信息补充完整')
        return
      }
      loginAsync(val)
    })
  }

  return (
    <div className='login-page'>
      <List
        renderHeader={() => '用户登录'}
      >
        <List.Item>
          <InputItem
            {...getFieldProps('userName', {
              rules: [ {required: true} ],
              initialValue: ''
            })}
            placeholder='请输入用户名'
          >
            用户名：
          </InputItem>
        </List.Item>
        <List.Item>
          <InputItem
            {...getFieldProps('password', {
              rules: [ {required: true} ],
              initialValue: ''
            })}
            type='password'
            placeholder='请输入密码'
          >
            密码：
          </InputItem>
        </List.Item>
      </List>
      <Button type='warning' onClick={handleSubmit}>登录</Button>
      <div className='register'><Link to='/register'>没有账户？去注册</Link></div>
    </div>
  )
}

export default createForm()(Login)
